@import '~@sourcegraph/react-loading-spinner/lib/LoadingSpinner.css';

.hover-overlay {
    --hover-overlay-vertical-padding: 0.25rem;
    --hover-overlay-horizontal-padding: 1rem;
    --hover-overlay-contents-right-padding: 1rem;
    --hover-overlay-content-margin-top: 0.5rem;
    --hover-overlay-separator-color: var(--border-color);

    // Fixes the issue with `position: sticky` of the close button in Safari.
    // The sticky element misbehaves because `.card` has a `display: flex` rule.
    // Minimal example: https://codepen.io/valerybugakov/pen/ExWWOao?editors=1100
    display: block;
    position: absolute;
    min-width: 6rem;
    max-width: 34rem; // was 32rem; + 2rem to fit maximum code intel alert text
    z-index: 100;
    transition: opacity 100ms ease-in-out;
    // Make sure content doesn't leak behind border-radius
    overflow: hidden;
    padding-bottom: var(--hover-overlay-vertical-padding);

    &__close-button {
        // The close button should stay in place when scrolling a large hover content.
        position: sticky;
        float: right;
        top: var(--hover-overlay-content-margin-top);
        margin-right: -1.25rem;
        margin-left: 0;

        // Overlay alert background
        z-index: 1;

        // When loading, we want the loader to be centered in the hover overlay,
        // not centered within the space left of the close button.
        &--loading {
            position: absolute;
            top: calc(var(--hover-overlay-content-margin-top) + var(--hover-overlay-vertical-padding));
            right: 0.75rem;
            // While loading close-button has an absolute position with the `right` coordinate,
            // so `margin-right` is redundant in this state.
            margin-right: 0;
        }
    }

    &__badge {
        float: right;
        // Align badge vertically with the close button and first row of the text content.
        margin-top: var(--hover-overlay-content-margin-top);
        margin-left: 0.5rem;
        margin-right: 0.25rem;
        // Small margin-bottom to add some space between the badge and long content that wraps around it.
        margin-bottom: 0.25rem;
        // Needs to be absolute value to align well with the content
        // because it's wrapped into a `small` which might have different font-size.
        line-height: 1rem;
        text-transform: uppercase;

        &-label {
            vertical-align: top;
        }

        :first-of-type {
            margin-right: 0;
        }
    }

    &__contents {
        // Make very large MarkupContents scroll.
        overflow-y: auto;
        max-height: 10rem;
        padding-top: var(--hover-overlay-vertical-padding);
        padding-bottom: 0;
        padding-left: var(--hover-overlay-horizontal-padding);
        padding-right: var(--hover-overlay-contents-right-padding);

        &--with-close-button {
            // Required to avoid close button and text content overlap on scroll.
            --hover-overlay-contents-right-padding: 2rem;
        }

        // To center loader-icon relative to whole overlay block make horizontal paddings equal.
        &--loading {
            padding: var(--hover-overlay-vertical-padding) var(--hover-overlay-horizontal-padding);
        }

        // These styles should not be applied to content inside of the alerts block.
        .hover-overlay__content {
            // Required to apply Body/Small styles. We cannot wrap only text into `<small>` element
            // because it's part of the markdown which could contain `<code>` and `<small>` too.
            font-size: 0.75rem;
            line-height: (16/12);
            color: var(--hover-overlay-content-color);

            // Required for any first content item to align with the close button on the first row.
            > *:first-child {
                margin-top: var(--hover-overlay-content-margin-top);
                margin-bottom: 0.5rem;
            }
        }

        // Descendant selectors are needed here to style rendered markdown.
        // stylelint-disable selector-max-compound-selectors
        p {
            margin-top: 0.75rem;
            margin-bottom: 0.75rem;
        }

        pre {
            margin-top: var(--hover-overlay-content-margin-top);
            margin-bottom: 0.5rem;
            // Required for the correct line-height of the `<code>` element.
            line-height: 1;
        }

        code {
            font-size: 0.75rem;
        }

        // We use <hr>s as a divider between multiple contents.
        // This has the nice property of having floating buttons that text wraps around.
        hr {
            // `<p>` and `<pre>` define their own margins, `<hr>` is only concerned with rendering the separator itself.
            margin-top: 0;
            margin-bottom: 0;
            // Enlarge `<hr>` width on the right to span across extra left and right padding.
            margin-left: calc(var(--hover-overlay-horizontal-padding) * -1);
            margin-right: calc(var(--hover-overlay-contents-right-padding) * -1);
            // stylelint-disable-next-line declaration-property-unit-whitelist
            height: 1px;
            overflow: visible;
            border: none;
            // The <hr> acts like a border, which should always be exactly 1px
            // @quinn keast
            // By using one colour for the border and another for the internal separators,
            // we create better distinction between the popover and its background content, without making it too strongly contrasted within.
            background-color: var(--hover-overlay-separator-color);
        }
        // stylelint-enable selector-max-compound-selectors
    }

    &__content {
        display: contents;
        max-height: 15rem;
        overflow-x: auto;
        word-wrap: normal;

        // Descendant selectors are needed here to style rendered markdown.
        // stylelint-disable selector-max-compound-selectors
        pre,
        code {
            padding: 0;
            // We want code to wrap, not scroll (but whitespace needs to be preserved).
            white-space: pre-wrap;
            // Any other value would create a new block formatting context,
            // which would prevent wrapping around the floating buttons.
            overflow: visible;
        }
        // stylelint-enable selector-max-compound-selectors
    }

    // Every block inside of the overlay should have equal horizontal padding.
    // Only `contents` has bigger padding on the right to avoid close button overlap on scroll.
    &__actions,
    &__alerts {
        padding-left: var(--hover-overlay-horizontal-padding);
        padding-right: var(--hover-overlay-horizontal-padding);
    }

    &__alerts {
        display: grid;
        flex-direction: column;
        row-gap: 0.75rem;
        // `padding-top` and `border` are required to separate alerts block from the scrollable content.
        // Otherwise text scrolls right from the alert border which doesn't look good.
        border-top: 1px solid var(--hover-overlay-separator-color);
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        // Make sure HoverOverlay doesn't get too large even with large alerts.
        overflow-y: auto;
        max-height: 20rem;
    }

    &__alert {
        // Use flex container to move dismiss button to the right and center it vertically.
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;

        .hover-overlay__content {
            display: inline;
        }

        // Descendant selector is needed here to style rendered markdown.
        p:last-child {
            margin-bottom: 0;
        }
    }

    &__alert-icon {
        margin-right: 0.25rem;
    }

    &__alert-dismiss {
        margin-left: 0.75rem;
        line-height: 1;
    }

    &__actions {
        display: flex;
        padding-top: 0.75rem;
        padding-bottom: 0.5rem;
        border-top: 1px solid var(--hover-overlay-separator-color);
    }

    &__action {
        flex: 0 1 auto;
        text-align: center;

        & + & {
            margin-left: 0.25rem;
        }
    }

    &__loader-row {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        border: none;
        border-radius: 0;
    }

    &__hover-error {
        margin-top: var(--hover-overlay-content-margin-top);
        margin-bottom: 0.75rem;
    }

    &__hover-empty {
        display: block;
        // Because hover-empty is `<small>` we need bigger margin-top to align it with the close button.
        margin-top: var(--hover-overlay-content-margin-top);
        margin-bottom: 0.5rem;
    }
}
